import React from 'react';
import {
  View,
  Text,
  Button,
  Image,
  TouchableOpacity,
  Modal,
  findNodeHandle,
  NativeModules,
  SafeAreaView
} from 'react-native';
import {createStackNavigator} from 'react-navigation';
import CarouselTest from "./components/carouselTest/index";
import Chars from './components/charts/chars-art/Chars';
import AnimatePie from "./components/charts/pie-d3";
import TitleModal from "./components/titleModal/titleModal";
import CollapsibleExample from "./components/ant-copy/collapsible/Collapsible";
import SignatureDemo from "./components/animate/signature-canvas/SignatureDemo";
import ActionSheetDemo from "./components/ant-copy/action-sheet/ActionSheetDemo";
import BasicTagExample from "./components/ant-copy/badge/BadgeDemo";
import CalendarTest from "./components/ant-copy/calendar/CalendarTest";
import MakeItRain from "./components/animate/rain";
import CardDemo from "./components/ant-copy/card/CardDemo";
import ListDemo from "./components/ant-copy/list/ListDemo";
import CheckDemo from "./components/ant-copy/checkbox/CheckDemo";
import MModalDemo from "./components/m-group/m-modal/MModalDemo";
import PopupDemo from "./components/m-group/m-picker/demo/PopupDemo";
import PickerDemo from "./components/m-group/m-picker/demo/PickerDemo";
import MultiPickerDemo from "./components/m-group/m-picker/demo/MultiPickerDemo";
import PopupDateDemo from "./components/m-group/m-date-picker/demo/PopupDateDemo";
import PickerDateDemo from "./components/m-group/m-date-picker/demo/PickerDateDemo";
import DatePickerDemo from "./components/ant-copy/date-picker/DatePickerDemo";
import DatePickerViewDemo from "./components/ant-copy/date-picker-view/DatePickerViewDemo";
import GridDemo from "./components/ant-copy/grid/GridDemo";
import TopModalDemo from "./components/ant-copy/modal/TopModalDemo";
import NoticeBarDemo from "./components/ant-copy/notice-bar/NoticeBarDemo";
import PaginationDemo from "./components/ant-copy/pagination/PaginationDemo";
import CascaderPickerDemo from "./components/m-group/m-cascader/demo/CascaderPickerDemo";
import CascaderPopupDemo from "./components/m-group/m-cascader/demo/CascaderPopupDemo";
import PopupPickerDemo from "./components/ant-copy/picker/PopupPickerDemo";
import PickerViewDemo from "./components/ant-copy/picker-view/PickerViewDemo";
import PopoverDemo from "./components/ant-copy/popover/PopoverDemo";
import ProgressDemo from "./components/ant-copy/progress/ProgressDemo";
import RadioDemo from "./components/ant-copy/radio/RadioDemo";
import ParentComponent from "./state-demo/ParentComponent";
import ResultDemo from "./components/ant-copy/result/ResultDemo";
import SearchBarDemo from "./components/ant-copy/search-bar/SearchBarDemo";
import SegmentedDemo from "./components/ant-copy/segmented-control/SegmentedDemo";
import SliderDemo from "./components/ant-copy/slider/SliderDemo";
import InputNumberDemo from "./components/m-group/m-input-number/InputNumberDemo";
import StepperDemo from "./components/ant-copy/stepper/StepperDemo";
import StepsDemo from "./components/ant-copy/steps/StepsDemo";
import TagDemo from "./components/ant-copy/tag/TagDemo";
import TextAreaItemDemo from "./components/ant-copy/textarea-item/TextAreaItemDemo";
import CopyTextDemo from "./components/html-view/CopyTextDemo";
import FlatListWithCheck from "./demo/check-list/FlatListWithCheck";
import SnapCarouselDemo from "./components/snap-carousel/demo";
import FlowModalDemo from "./components/flow-modal/FlowModalDemo";
import ScrollerTableView from "./demo/scroller-tableview/ScrollerTableView";
import OnScrollDemo from "./demo/scroller-view/OnScrollDemo";
import AnimatedTurnTableDrawPage from "./components/animate/AnimatedTurnTableDrawPage";
import LotteryPage from "./components/animate/lottery/LotteryPage";
import LotteryPage01 from "./components/animate/lottery/LotteryPage01";
import OnScrollDemo1 from "./demo/scroller-view/OnScrollDemo1";
import SimpleAnimate1 from "./components/animate/base-demo/SimpleAnimate1";
import SimpleAnimate2 from "./components/animate/base-demo/SimpleAnimate2";
import SimpleAnimate3 from "./components/animate/base-demo/SimpleAnimate3";
import SimpleAnimate4 from "./components/animate/base-demo/SimpleAnimate4";
import SimpleAnimate5 from "./components/animate/base-demo/SimpleAnimate5";
import SimpleAnimate6 from "./components/animate/base-demo/SimpleAnimate6";
import SimpleAnimate7 from "./components/animate/base-demo/SimpleAnimate7";
import ImageDemo1 from "./image-demo/ImageDemo1";
import ButtonDemo1 from "./react-clone-demo/Button/ButtonDemo1";
import ButtonDemo2 from "./react-clone-demo/Button/ButtonDemo2";
import ButtonDemo3 from "./react-clone-demo/Button/ButtonDemo3";
import ButtonDemo4 from "./react-clone-demo/Button/ButtonDemo4";
import Dashboard from "./components/charts/dashboard/Dashboard";
import HomeHeadline from "./components/animate/Headline";
import PassWordDemo from "./components/pay-password/PassWordDemo";
import SearchDemo from "./components/search-toolbar/SearchDemo";
import OnScrollDemo2 from "./demo/scroller-view/OnScrollDemo2";
import ResponderDemo from "./responder/ResponderDemo";
import FlipCard from "./components/animate/FlipAnimate/FlipCard";
import FireworksDemo from "./components/animate/Fireworks/FireworksDemo";
import CircularProgress from "./components/animate/CircularProgress/CircularProgress";
import Forest from "./components/animate/RainART/Forest";
import Headline1 from "./components/animate/Headline1";
import CryptoDemo from "./components/CryptoDemo";

const {UIManager} = NativeModules;


class LogoTitle extends React.Component {
  render() {
    return (
      <Image
        source={require('./spiro.png')}
        style={{width: 30, height: 30}}
      />
    );
  }
}

class HomeScreen extends React.Component {
  static navigationOptions = ({navigation}) => {
    const params = navigation.state.params || {};

    return {
      headerTitle: <LogoTitle/>,
      headerRight: (
        <Button onPress={params.increaseCount} title="+1" color="#fff"/>
      ),
    };
  };

  componentWillMount() {
  }

  state = {
    count: 0,
  };


  _increaseCount = () => {
    this.setState({count: this.state.count + 1});
  };


  componentDidMount() {
    this.props.navigation.setParams({increaseCount: this._increaseCount});

    var format = function (s, a, b, c) {
      var args = [a, b, c];
      var count = 0;
      //通过正则替换%s
      return s.replace(/%s/g, function () {
        return args[count++];
      });
    }
    var s = "my name is %s, I'm %s years old, and I have %s brother."
    var b = format(s, "wendy", 24, 2)
    console.log(b)
  }

  componentWillUnmount() {

  }

  componentDidCatch(error, info) {
    console.log('componentDidCatch', error, info)
  }


  render() {
    return (
      <SafeAreaView style={{flex: 1}}>
        {/*<Text>{this.state.count + ''}</Text>*/}
        {/*<Button*/}
        {/*title="Go to Details"*/}
        {/*onPress={() => this.props.navigation.navigate('Details')}*/}
        {/*/>*/}
        {/*<CarouselTest/>*/}
        {/*<Chars/>*/}
        {/*<AnimatePie/>*/}
        {/*<MakeItRain/>*/}
        {/*<FlipCard/>*/}
        {/*<SignatureDemo/>*/}
        {/*<FireworksDemo/>*/}
        {/*<Forest/>*/}
        {/*<CircularProgress/>*/}
        {/*<SnapCarouselDemo/>*/}
        {/*<CollapsibleExample/>*/}
        {/*<TitleModal/>*/}
        {/*<ActionSheetDemo/>*/}
        {/*<BasicTagExample/>*/}
        <CalendarTest/>
        {/*<CardDemo/>*/}
        {/*<ListDemo/>*/}
        {/*<CheckDemo/>*/}
        {/*<MModalDemo/>*/}
        {/*<PopupDemo/>*/}
        {/*<PickerDemo/>*/}
        {/*<MultiPickerDemo/>*/}
        {/*<PickerDateDemo/>*/}
        {/*<DatePickerDemo/>*/}
        {/*<DatePickerViewDemo/>*/}
        {/*<GridDemo/>*/}
        {/*<TopModalDemo/>*/}
        {/*<NoticeBarDemo/>*/}
        {/*<PaginationDemo/>*/}
        {/*<CascaderPickerDemo/>*/}
        {/*<CascaderPopupDemo/>*/}
        {/*<PopupPickerDemo/>*/}
        {/*<CryptoDemo/>*/}
        {/*<PickerViewDemo/>*/}
        {/*<PopoverDemo/>*/}
        {/*<ProgressDemo/>*/}
        {/*<RadioDemo/>*/}
        {/*<ParentComponent/>*/}
        {/*<ResultDemo/>*/}
        {/*<SearchBarDemo/>*/}
        {/*<SegmentedDemo/>*/}
        {/*<SliderDemo/>*/}
        {/*<InputNumberDemo/>*/}
        {/*<StepperDemo/>*/}
        {/*<StepsDemo/>*/}
        {/*<TagDemo/>*/}
        {/*<TextAreaItemDemo/>*/}
        {/*<CopyTextDemo/>*/}
        {/*<FlatListWithCheck/>*/}
        {/*<FlowModalDemo/>*/}
        {/*<ScrollerTableView/>*/}
        {/*<OnScrollDemo/>*/}
        {/*<OnScrollDemo1/>*/}
        {/*<OnScrollDemo2/>*/}
        {/*<AnimatedTurnTableDrawPage/>*/}
        {/*<LotteryPage/>*/}
        {/*<LotteryPage01/>*/}
        {/*<SimpleAnimate1/>*/}
        {/*<SimpleAnimate2/>*/}
        {/*<SimpleAnimate3/>*/}
        {/*<SimpleAnimate4/>*/}
        {/*<SimpleAnimate5/>*/}
        {/*<SimpleAnimate6/>*/}
        {/*<SimpleAnimate7/>*/}
        {/*<ImageDemo1/>*/}
        {/*<ButtonDemo1/>*/}
        {/*<ButtonDemo2/>*/}
        {/*<ButtonDemo3 show2/>*/}
        {/*<ButtonDemo4/>*/}
        {/*<Dashboard/>*/}
        {/*<HomeHeadline/>*/}
        {/*<Headline1/>*/}
        {/*<PassWordDemo/>*/}
        {/*<SearchDemo/>*/}
        {/*<ResponderDemo/>*/}
      </SafeAreaView>


    );
  }
}


class DetailsScreen extends React.Component {
  static navigationOptions = ({navigation}) => {
    const params = navigation.state.params || {};
    return ({
      headerTitle: 'Details',
      headerRight: (
        <TitleModal/>
      ),
    })
  };

  componentDidMount() {

  }

  componentWillUnmount() {
  }

  render() {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Text>Details Screen</Text>
        <Button
          title="Go to Details... again"
          onPress={() => this.props.navigation.push('Details')}
        />
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate('Home')}
        />
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
        <Button
          title="Go back 3 screen"
          onPress={() => this.props.navigation.pop(3)}
        />


      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
    /* The header config from HomeScreen is now here */
    navigationOptions: {
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  }
);

export default class App extends React.Component {
  render() {
    return <RootStack/>;
  }
}

